<template>
  <div class="about">
    <div class="about_info">
      <ul>
        <li v-for="(item,index) in info" :key="index">
          <img :src="item.url" alt="">
          <p>{{item.text}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',

  data() {
    return {
      info: [
        {url: require('../../assets/image/交友.png'), text: `
          WIT社区提供一站式交友,为网站上所有网友打造一个和平，健康的交流环境。
        `},
        {url: require('../../assets/image/交流.png'), text: `
          社区提供用户文章文章、话题的发布实现用户间更深层次的沟通方式,实现网站多元化。
        `},
        {url: require('../../assets/image/信息化调研.png'), text: `
          全方位信息调研服务,不定期咨询用户网站满意度,接纳用户提议为营造良好网站更进一步。
        `},
        {url: require('../../assets/image/客服.png'), text: `
          WIT社区提供24小时在线客服,为有需求的用户提供服务。
        `},
      ]
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style scoped>
.about{
  width: 100%;
  padding: 60px;
}
.about .about_info ul{
  display: flex;
  flex-direction: column;
}
.about_info ul li{
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 0.8rem;
  color: gray;
  margin-top: -100px;
  transition: all .5s ease;
  opacity: 0;
  animation-fill-mode: forwards;
}
.about_info ul li:first-child{
  margin: 0;
  animation: leftFade 1s ease 1 forwards;
}
.about_info ul li:nth-child(2){
  animation: rightFade 1s ease 1s 1 forwards;
}
.about_info ul li:nth-child(3){
  animation: leftFade 1s ease 2s 1 forwards;
}
.about_info ul li:nth-child(4){
  animation: rightFade 1s ease 3s 1 forwards;
}
.about_info ul li:nth-child(2n){
  flex-direction: row-reverse;
  text-align: right;
}
.about_info li img{
  width: 20%;
}
.about_info li p{
  flex: 1;
}
@keyframes leftFade {
  0%{
    opacity: 0;
    transform: translateX(-200px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rightFade {
  0%{
    opacity: 0;
    transform: translateX(200px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (max-width:800px) {
  .about{
    padding: 0;
  }
  .about_info ul li{
    margin: 0;
  }
  .about_info li img{
    min-width: 180px;
  }
}
</style>